import Vue from "vue"
//导入路由相关的包、
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter)
//导入路由
import router from './router.js'

// //按需导入自己的需要的mint-ui组件  不能满足懒加载  需要全局注册
// import { Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui';
// //注册header组件
// Vue.component(Header.name, Header);
// //注册button组件
// Vue.component(Button.name, Button);
// //轮播图组件
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem)
// //注册   懒加载
// Vue.use(Lazyload);

//全局注册mint-ui
import MintUi from 'mint-ui'
//注册mintUI
Vue.use(MintUi)
//导入样式
import 'mint-ui/lib/style.css'


//导入mui样式表
import './lib/mui/css/mui.min.css'
//导入扩展你的字体图标
import './lib/mui/css/icons-extra.css'


//导入vue-preview  制作缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//导入vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
//全局配置根路径  必须写在VueResource后面
Vue.http.options.root = 'http://vue.studyit.io';
//全局配置post提交时候  表单数据类型
Vue.http.options.emulateJSON = true;

//导入vuex
import Vuex from 'vuex'
//注册vuex
Vue.use(Vuex)
var carData=JSON.parse(localStorage.getItem("car")||"[]")//刚进入页面获取存储的购物车数据，并赋值给state.car
//new Vuex.store
const store=new Vuex.Store({
    state:{//存放公共数据的地方 this.$store.state.***
        car:carData//存放商品id  ，count ，price
    },
    mutations:{//存放操作 state 中数据的方法 this.$store.commit("要提交的方法名称"，唯一参数【可选】)
        addtocar(state,goodsinfo){//判断加入购物车的id与购物车已有的id，如果一样，count+；如果没有push
            var flag=false//假设没有相同的商品
            state.car.some(item =>{
                if(item.id==goodsinfo.id){
                    item.count+=goodsinfo.count
                    flag=true
                    return true
                }    
            })
            if(!flag){//没有找到
                state.car.push(goodsinfo) 
            }
            //把最新的car数据保存到localStorage中
           localStorage.setItem("car",JSON.stringify(state.car))
        },
        updateCarCount(state,goodsinfo){//根据增加减少 更新购物车中的商品总数量
            state.car.some(item =>{
                if(item.id==goodsinfo.id){
                    item.count=goodsinfo.count
                    return true
                }
            })
            //把最新的car数据保存到localStorage中
            localStorage.setItem("car",JSON.stringify(state.car))
        },
        removeGoodsFromCar(state,id){//根据id删除store中的数据
            state.car.some((item,i) =>{
                if(item.id==id){
                    state.car.splice(i,1)   
                    return true
                }
            })
            //每次删除一次  ，就把数据更新到本地
            localStorage.setItem("car",JSON.stringify(state.car))
        },
        updateSelected(state,info){//勾选状态同步到这里
            state.car.some(item =>{
                if(item.id==info.id){
                    item.selected=info.selected
                }
            })
            localStorage.setItem("car",JSON.stringify(state.car))
        }
    
    },
    getters:{//主要可以当做计算书型使用，也可以当做过滤器来使用，this.$store.getters.***
        getAllCount(state){//获取全部数量
            var c=0;
            state.car.forEach(item =>{
                c+=item.count
            })
            return c
        },
        getcount(state){//获取每件商品对应的数量
            var o={}
            state.car.forEach(item =>{
                o[item.id]=item.count
            })
            return o
        },
        getgoodsSelected(state){//获取商品勾选状态
            var s={}
            state.car.some(item =>{
                s[item.id]=item.selected
            })
            return s
        },
        getSelectedAndamount(state){//获取总件数和总价
            var a={
                totalCount:0,//总件数
                amount:0//总价
            }
            state.car.forEach(item =>{
                if(item.selected){
                    a.totalCount+=item.count
                    a.amount+=item.count*item.price
                }
            })
            return a
        }

    }
})


//导入时间过滤器
import './filter.js'

//导入APP组件
import app from './App.vue'
var vm=new  Vue({
    el:"#app",
    render:c => c(app),
    router,
    store,//挂载vuex
})


